<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻量级jquery数字动画插件</title>

    <style type="text/css">
        /* body{background-color: #222222; color: #fff} */
        
        .container {
            /* margin: 150px auto;
            max-width: 480px; */
        }
        
        h2,
        h3 {
            text-align: center;
        }
        
        .demo {
            text-align: center;
            /* margin-top: 1000px; */
        }
        
        span.counter {
            display: block;
            margin: 20px auto;
            font-size: 64px;
            font-family: Arial;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="htmleaf-container">

        <div class="container">
            <h2>jQuery Countup.js Plugin Demo</h2>
            <!-- <h3>向下滚动页面 ↓</h3> -->
            <div class="demo">
                <span class="counter">1,498,547.00</span>
                <span class="counter">99.99</span>
                <span class="counter">1234567</span>
            </div>
        </div>

    </div>

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script type="text/javascript">
        $('.counter').countUp();
    </script>
</body>

</html>